<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<t:template>
	<jsp:attribute name="http_header">
		<title>${pageTitle}</title>	
		<%@include file="/WEB-INF/includes/http-header.jsp" %>	
	</jsp:attribute>
	
	<jsp:attribute name="header">
		<%@include file="/WEB-INF/includes/header.jsp" %>	
	</jsp:attribute>
	
	<jsp:attribute name="left_content">
		<%@include file="/WEB-INF/includes/left-menu.jsp" %>	
	</jsp:attribute>
	
	<jsp:attribute name="right_content">
		<h2>DANH MỤC SẢN PHẨM/DỊCH VỤ TRONG PHÒNG</h2>
		
		<div style="padding:5px;background-color:#EEEBE1;">
			<form:form method="POST" action="save-product-in-room.html" id="addForm">
				<table>
					<tr class="hidden">
						<td class="catalog1">
							ID của sản phẩm
						</td>
						<td class="catalog2">
							<form:input path="id" value="${product.id}" spellcheck="false"
										cssClass="big-textbox" />				
						</td>
					</tr>
					<tr>
						<td class="catalog1">
							Mã sản phẩm
						</td>
						<td class="catalog2">
							<form:input path="code" value="${product.code}" spellcheck="false"
										cssClass="big-textbox" />				
						</td>
					</tr>
					
					<tr>
						<td class="catalog1">
							Tên sản phẩm
						</td>
						<td>
							<form:input path="name" value="${product.name}" spellcheck="false"
										cssClass="big-textbox" />			
						</td>
					</tr>	
					
					<tr>
						<td class="catalog1">
							Giá ban đầu
						</td>
						<td>
							<input id="price" value="" spellcheck="false" class="big-textbox" />							
						</td>
					</tr>					
					
					<tr>
						<td class="catalog1">
							Tiền tệ
						</td>
						<td style="padding-top:2px;">
							<form:select path="currency" cssClass="small-combobox combobox">								
								<form:options items="${currencyList}" />
							</form:select>													
						</td>
					</tr>				
							
					<tr>
						<td class="catalog1">
							Diễn giải
						</td>
						<td style="width:450px">
							<form:textarea path="note" value="${product.note}" cssClass="standard-textarea"
										   spellcheck="false"/>														
						</td>
					</tr>
					
					<tr>
						<td>
							&nbsp;
						</td>
						<td>
							&nbsp;
						</td>
					</tr>
					
					<tr>
						<td>
							&nbsp;
						</td>
						<td>			
							<a href="/iHMP/accommodation/product-in-room-catalog.html" class="buttonCollapse">LÀM MỚI</a>			
							<a href="javascript:void" class="buttonCollapse mrgLeft5">LƯU</a>							
						</td>
					</tr>								
				</table>
			</form:form>						
		</div>
		
		<div class="mrgTop20">
			<table>
				<tr>
					<td><input type="text" class="small-textbox-right" maxlength="3" value="${recordPerPage}"/></td>
					<td class="paddLeft5"><a href="#" class="buttoncollapse">LOAD DANH SÁCH</a></td>					
				</tr>
			</table>
		</div>
		
		<div class="mrgTop5">
			<table class="grid">
				<tr class="header">
					<td style="width:30px;">STT</td>
					<td style="width:70px;">Mã sản phẩm</td>
					<td style="width:70px;">Tên sản phẩm</td>	
					<td style="width:50px;">Tiền tệ</td>				
					<td style="width:420px;">Diễn giải</td>
					<td style="width:50px;">Thao tác</td>
				</tr>
				
				<c:forEach var="p" items="${productList}" varStatus="count">
					<tr class="body">
						<td>1</td>
						<td class="code"><c:out value="${p.code}" /></td>
						<td class="name"><c:out value="${p.name}" /></td>
						<td class="name"><c:out value="${p.currency.name}" /></td>							
						<td><c:out value="${p.note}" /></td>						
						<td>
							<a href="/iHMP/accommodation/update-product-in-room.html?productInRoomId=${p.id}" class="standard-link editBtn" id="row_edit_${p.id}">Sửa</a> |
							<a href="/iHMP/accommodation/delete-product-in-room.html?productInRoomId=${p.id}" class="standard-link deleteBtn" id="row_delete_${p.id}">Xóa</a>
						</td>
					</tr>
				</c:forEach>	
				
				<tr class="footer">
					<td colspan="6">
						<span>1</span> |
						<a href="#" class="standard-link" >2</a> |
						<a href="#" class="standard-link" >3</a> |
						<a href="#" class="standard-link" >4</a> |
						<a href="#" class="standard-link" >5</a>
					</td>
				</tr>											
			</table>
		</div>
		
		<div class="hidden-field">
			<input type="text" id="totalGridPage" value="" />
			<input type="text" id="currentGridPage" value="" />
			<input type="text" id="addnewOrEdit" value="" />
		</div>
		
		<script type="text/javascript">
			$("#addForm a.buttonCollapse").click(function(){
				$("#addForm").submit();
			});
			$("table.grid tr.body a.deleteBtn").click(function(){
				alert("Bạn có chắc chắn xóa Mã sản phẩm:" + $(this).parent().parent().find(".code").text()
					  + " - " + $(this).parent().parent().find(".name").text());
				return true;
			});
			
			$(".combobox").chosen({no_results_text: "Không có"});		
				
		</script>
	</jsp:attribute>
	
	<jsp:attribute name="footer">
		<%@include file="/WEB-INF/includes/footer.jsp" %>
	</jsp:attribute>
	
</t:template>